import { debounce } from "lodash";

  const rootStyle = window.document.querySelector(':root')
  /**
   * @type HTMLDivElement
   */
let el

const observer = new ResizeObserver(debounce(() => {
    let width = el.clientWidth
    let height = el.clientHeight
    if (width <= 0) { width = 1920 }
    if (height <= 0) { height = 1080 }
    console.log(width,height)
    if (width / height < 1920 / 1080) {
        rootStyle.style.setProperty('--scale-ratio', String(width / 1920))
      }else {
        rootStyle.style.setProperty('--scale-ratio', String(height / 1080))
    }
}, 500))


export function start(element) {
    el = element
    observer.observe(element)
}

export function stop(element) {
    observer.unobserve(element)
    el = null
}
